import "./login.scss"

import { Card, Input, Button, Form, Image,notification,message  } from "antd";
import logo from "@/assets/logo.png"
import { toGetToken ,toPostToken} from "@/apis/login";
import { useEffect, useState } from "react";
import { request } from "@/utils";
import { useSelector, useDispatch } from "react-redux"
import { useNavigate } from "react-router-dom";
import { setToken } from "@/store/userStore"

function Login() {
    // const {token} = useSelector(state=>state.userStore)
    
    // useEffect(()=>{
    //    if(localStorage.getItem("token")){
        //    let a=localStorage.getItem("token")
        //    
        // dispatch(setToken(a))
    //   console.log(token)
    //    } 
    // ,[])
 const dispatch = useDispatch();
 const navigate =useNavigate()

//  const [api, contextHolder] = notification.useNotification();
//  const openNotification = () => {
    // api.open({
    //   message: 'Notification Title',
    //   description:
        // 'I will never close automatically. This is a purposely very very long description that has many many characters and words.',
    //   duration: 0,
    // });
//   };

    const finish = async(value) => {
       await login(value)
        navigate("/Layout")
        message.success("登录成功")
    }
    const finishFaild = (errorInfo) => {
        console.log(errorInfo)
    }
    //const {token} = useSelector(state=>state.userStore.token)

    const login = async (data) => {
        // let result = await request.post('/authorizations', data)
        let result = await toPostToken(data);
        if (result && result.status === 201) { //验证码写死了必须是246810
            dispatch(setToken(result.data.data.token))
        } else {
            message.success("出现错误")
        }
    }
    // const [phone,setPhone] = useState(null);
    // const [check,setcheck] = useState(null);
    return (
        <>
            <div className="log">
                <div className="inner">
                    <Card className="ca" style={{ width: 300 }} bordered={false}>
                        <img alt="" src={logo}></img>
                        <Form
                            validateTrigger="onBlur" //默认就是change
                            autoComplete="off"
                            onFinish={(value) => finish(value)}
                            onFinishFailed={(err) => finishFaild(err)}
                        >
                            <Form.Item name="mobile" //要与后端的接口名保持一致
                                rules={[
                                    //第一条校验通过再校验第二条
                                    {
                                        required: true,
                                        message: '请输入手机号！',
                                    },
                                    {

                                        pattern: /^1[3-9]\d{9}$/,
                                        message: "输入手机号格式错误"
                                    }
                                ]}>
                                <Input size='large' placeholder="请输入手机号" ></Input>
                            </Form.Item>
                            <Form.Item name="code" rules={[
                                {
                                    required: true,
                                    message: '请输入验证码！',
                                },
                                // {
                                // pattern:/^[1-9a-zA-Z]{6}$/,
                                // message:"输入验证码格式错误"
                                // }
                            ]}>
                                <Input size='large' placeholder="请输入验证码" ></Input>
                            </Form.Item>
                            <Form.Item>
                                <Button size='large' htmlType="submit" type="primary" style={{ width: '100%' }}>登录</Button>
                            </Form.Item>
                        </Form>
                    </Card>
                </div>
            </div>
        </>
    )
}
export default Login